<template>
  <page-header-wrapper>
    <page-tab-list> </page-tab-list>
    <a-card :border="false">
      <a-form-model
        :model="formData"
        :rules="rules"
        :labelCol="{ xxl: 2, xl: 3, lg: 4 }"
        :wrapperCol="{ xxl: 7, xl: 9, lg: 12 }"
        ref="form"
      >
        <div class="title" style="padding-top: 0">出行费用设置</div>

        <a-form-model-item label="起步价格" prop="starting_price">
          <a-input allowClear placeholder="请输入起步价格" addon-after="元" v-model="formData.starting_price"></a-input>
        </a-form-model-item>
        <a-form-model-item label="每公里加收" prop="additional_charge">
          <a-input
            allowClear
            placeholder="请输入每公里加收价格"
            addon-after="元"
            v-model="formData.additional_charge"
          ></a-input>
        </a-form-model-item>
        <div class="title" style="padding-top: 0">抢单设置</div>

        <a-form-model-item
          label="抢单范围距离"
          prop="order_space"
          extra="在该范围的师傅，满足对应服务的师傅可以抢单时，取两者最小值"
        >
          <a-input
            allowClear
            placeholder="请输入抢单范围距离"
            addon-after="米"
            v-model="formData.order_space"
          ></a-input>
        </a-form-model-item>

        <div class="title" style="padding-top: 0">申请设置</div>

        <a-form-model-item :wrapper-col="{ span: 20 }" label="轮播图片" prop="banner">
          <CyyUploadImg
            @uploadSuccess="uploadImg"
            @deleteImg="deleteImg"
            :imgList.sync="formData.banner"
            imgSizeText="750px*280px"
            dataType="list"
          >
          </CyyUploadImg>
        </a-form-model-item>

        <a-form-model-item label="自定义表单名称">
          <a-input allowClear placeholder="请输入自定义表单名称" v-model="form_list.name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="表单设置" prop="list" align="center" :wrapper-col="{ xxl: 22, xl: 21, lg: 20 }">
          <a-row style="margin-bottom: 24px">
            <a-col span="10" style="display: flex">
              <a-select v-model="addType">
                <a-select-option value="text"> 单行文本 </a-select-option>
                <a-select-option value="textarea"> 多行文本 </a-select-option>
                <a-select-option value="time"> 时间选择器 </a-select-option>
                <a-select-option value="date"> 日期选择器 </a-select-option>
                <a-select-option value="uploadImg"> 图片上传 </a-select-option>
              </a-select>
              <a-button type="primary" style="margin-left: 12px" @click="addList">添加</a-button>
            </a-col>
          </a-row>
          <div class="table">
            <div class="table-body">
              <a-row class="title self-th">
                <a-col :span="4" style="text-align: left"> 类型 </a-col>
                <a-col :span="4" style="text-align: left"> 名称 </a-col>
                <a-col :span="4" style="text-align: left"> 提示语 </a-col>
                <a-col :span="4" style="text-align: left"> 默认值 </a-col>
                <a-col :span="4" style="text-align: center"> 必填 </a-col>
                <a-col :span="4" style="text-align: left"> 位置 </a-col>
              </a-row>
              <div class="list" @dragover.prevent>
                <a-row
                  class="item tr-row"
                  v-for="(item, index) in form_list.list"
                  :key="index"
                  :draggable="true"
                  v-dragging="{
                    item: item,
                    list: form_list.list,
                    group: 'row',
                  }"
                >
                  <a-col :span="4" style="text-align: left">
                    {{ showType(item.type) }}
                  </a-col>
                  <a-col :span="4" style="text-align: left">
                    <a-input style="width: 80%" v-model="item.name"></a-input>
                  </a-col>
                  <a-col :span="4" style="text-align: left">
                    <a-input
                      style="width: 80%"
                      v-model="item.tip"
                      :placeholder="item.type == 'uploadImg' ? '请选择图片' : ''"
                      v-if="item.type == 'text' || item.type == 'textarea' || item.type == 'uploadImg'"
                    ></a-input>
                  </a-col>
                  <a-col :span="4" style="text-align: left">
                    <a-input
                      v-if="
                        item.type == 'text' ||
                        item.type == 'textarea' ||
                        item.type == 'radio' ||
                        item.type == 'checkbox'
                      "
                      v-model="item.default"
                    ></a-input>
                    <a-time-picker v-model="item.default" v-if="item.type == 'time'" valueFormat="HH:mm:ss" />
                    <a-date-picker v-model="item.default" v-if="item.type == 'date'" valueFormat="YYYY-MM-DD" />
                  </a-col>
                  <a-col :span="4" style="text-align: center">
                    <a-checkbox
                      :checked="item.required == 1 ? true : item.required == 0 ? false : ''"
                      @change="(e) => changeChecked(e, index)"
                    ></a-checkbox>
                  </a-col>
                  <a-col :span="4" style="text-align: left">
                    <a-button type="danger" size="small" @click="deleteItem(index)">删除</a-button>
                    <a-icon type="unordered-list" style="cursor: move; margin-left: 5px" />
                  </a-col>
                </a-row>
                <div v-if="form_list.length == 0" style="margin-top: 20px">
                  <a-empty />
                </div>
              </div>
            </div>
          </div>
        </a-form-model-item>

        <div class="title" style="padding-top: 0">评价设置</div>
        <a-form-model-item label="评价标签" help="逗号拼接，例如（手法专业,热情礼貌）">
          <a-input allowClear placeholder="请输入评价标签" v-model="formData.tag"></a-input>
        </a-form-model-item>

        <div class="border-b"></div>
      </a-form-model>
      <a-row style="margin-top: 50px">
        <a-col :span="2"></a-col>
        <a-col>
          <a-button @click="submit" :loading="confirmLoading" type="primary">保存</a-button>
        </a-col>
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { setting } from '@/api/marketing/serviceHome'
import { cyyUploadImg } from '@/components/CyyUi/index'

export default {
  components: {
    CyyUploadImg: cyyUploadImg,
  },
  data() {
    return {
      addType: 'text',
      confirmLoading: false,
      formData: {
        order_space: '', //抢单范围距离***米
        fee_road: '', //路费规则
        form_apply: {}, //入驻表单
        tag: [], //评价标签
        is_delete: 0,
        created_at: 0,
        updated_at: 0,
        starting_price: '20.00', //起步价格
        additional_charge: '1.00', //每公里加收
        banner: [],
        tag: '',
      },
      form_list: {
        name: '',
        list: [],
      },
      rules: {
        order_space: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        fee_road: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        starting_price: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        additional_charge: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        banner: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
          {
            validator: (rule, value, callback) => {
              console.log(value, 'yanzheng')
              if (!value && !value.length) {
                callback(new Error('轮播图不能为空'))
              }
              callback()
            },
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  created() {
    this.getSetting()
  },
  methods: {
    uploadImg(e) {
      let banner = this.formData.banner ? this.formData.banner : []
      banner = [...banner, ...e.data]
      this.$set(this.formData, 'banner', JSON.parse(JSON.stringify(banner)))
    },
    deleteImg(e) {
      this.formData.banner.splice(e.index, 1)
    },
    async getSetting() {
      const res = await setting({}, 'GET')
      res.code == 0 && (this.formData = Object.assign(this.formData, res.setting))
      res.setting.form_apply && (this.form_list = res.setting.form_apply)
    },
    showType(type) {
      switch (type) {
        case 'text':
          return '单行文本'
        case 'textarea':
          return '多行文本'
        case 'time':
          return '时间选择器'
        case 'date':
          return '日期选择器'
        case 'radio':
          return '单选'
        case 'checkbox':
          return '多选'
        case 'uploadImg':
          return '图片上传'
      }
      return ''
    },
    addList() {
      this.form_list.list.push({
        type: this.addType,
        name: '',
        tip: '',
        required: false,
        default: '',
      })
    },
    changeChecked(e, index) {
      const checked = e.target.checked ? 1 : 0
      this.form_list.list[index].required = checked
    },
    deleteItem(index) {
      this.form_list.list.splice(index, 1)
    },
    async submit() {
      this.confirmLoading = true
      console.log(this.formData)
      try {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.formData.form_apply = this.form_list
            // this.formData.banner = JSON.stringify(this.formData.banner)

            const res = await setting({ setting: this.formData }, 'POST')
            this.visible = false
            this.getSetting()
            this.$message.success('保存成功')
          }
          this.confirmLoading = false
        })
      } catch (error) {
        this.confirmLoading = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  padding: 30px 0;
  padding-left: 10px;
  font-weight: 600;
  font-size: 18px;
}

.border-b {
  border-bottom: 1px solid #f5f5f5;
}

.table {
  width: 100%;
  margin-top: 10px;
  .table-body {
    .ant-row {
      min-height: 54px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
    }
    .self-th {
      background: #fafafa;
    }
  }
  .title {
    .ant-col {
      text-align: center;
      padding: 0 10px;
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
</style>
